<script setup>
import { onMounted, reactive, ref } from 'vue';
import { Search, Delete, EditPen, Plus, Refresh } from '@element-plus/icons-vue'
import { menuListApi, saveMenuApi, menuDetailApi, updateMenuApi, deleteMenuApi } from '@/apis/system/menu.js'
import iconList from '@/icon/icon-list.js'

// 参数
const params = reactive({
  name: '',
  status: '',
})

// 获取数据
const loading = ref(false)
const menus = ref([])
const menuList = async () => {
  loading.value = true
  const res = await menuListApi(params);
  menus.value = await handleBuildTable(res.data.list)
  loading.value = false
}

// 搜索
const handleSearch = () => {
  menuList();
}

// 重置
const handleRefresh = () => {
  params.name = '';
  params.status = '';
  menuList();
}

// 前端构建表格树形数据
const handleBuildTable = (arr) => {
  return arr.filter(item => {
    var parent = []
    arr.forEach((el, index) => {
      if (item.id === el.pid) {
        el.isChildren = true;
        parent.push(el);
      }
    })
    item.children = parent;
    return true;
  }).filter(el => el.isChildren !== true);
}

// 添加主菜单/修改菜单
let title = '';
const dialogVisible = ref(false)
const menuForm = ref({})
const handleAddOrUpdate = async (id) => {
  if (id === null) {
    title = "添加"
    menuForm.value = {};
    menuForm.value.pid = 0;
    menuForm.value.status = 0;
    menuForm.value.visible = 0;
    dialogVisible.value = true;
  } else {
    title = "修改"
    const res = await menuDetailApi(id);
    menuForm.value = res.data;
    dialogVisible.value = true;
  }
}

// 添加子菜单
const handleAddChildren = (id) => {
  title = "添加"
  menuForm.value = {};
  menuForm.value.pid = id;
  menuForm.value.status = 0;
  menuForm.value.visible = 0;
  dialogVisible.value = true;
}

// 点击确定
const handleConfirm = () => {
  if (menuForm.value.id === '' || menuForm.value.id === null || menuForm.value.id === void 0) {
    // 添加
    saveMenuApi(menuForm.value)
      .then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          menuList();
          dialogVisible.value = false;
        }
      })
  } else {
    // 修改
    updateMenuApi(menuForm.value)
      .then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          menuList();
          dialogVisible.value = false;
        }
      })
  }
}

// 点击取消
const handleCancel = () => {
  dialogVisible.value = false;
}

// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm(
    '你确定要删除此条数据吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    deleteMenuApi([id]).then(res => {
      if(res.code === 0){
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        menuList();
      }
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
       message: '操作取消',
    })
  })
}

onMounted(() => menuList())
</script>

<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">菜单名称</span>
        <el-input v-model="params.name" placeholder="请输入菜单名称" clearable style="width: 280px;" />
        <span style="display: inline-block;width: 70px;margin-left: 10px;">菜单状态</span>
        <el-select v-model="params.status" clearable placeholder="请选择菜单状态" style="width: 280px;">
          <el-option :key="0" label="启用" :value="0" />
          <el-option :key="1" label="禁用" :value="1" />
        </el-select>
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleSearch">搜索</el-button>
        <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button type="primary" plain @click="handleAddOrUpdate(null)">添加主菜单</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="menus" style="width: 100%" row-key="id">
          <el-table-column prop="name" label="组件名" width="150" />
          <el-table-column prop="type" label="类型" width="90" align="center">
            <template v-slot="scoped">
              <el-tag v-if="scoped.row.type === 'M'" class="ml-2">目录</el-tag>
              <el-tag v-else-if="scoped.row.type === 'C'" class="ml-2" type="success">菜单</el-tag>
              <el-tag v-else class="ml-2" type="warning">按钮</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="permission" width="180" label="权限标识" align="center" />
          <el-table-column prop="path" label="路径" width="150" align="center" />
          <el-table-column prop="component" label="组件" width="200" align="center" />
          <el-table-column prop="icon" label="图标" align="center">
            <template v-slot="scoped">
              <el-icon>
                <component class="icon" :is="scoped.row.icon"></component>
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template v-slot="scoped">
              <el-tag v-if="scoped.row.status === 0" class="ml-2" type="success">启用</el-tag>
              <el-tag v-else class="ml-2" type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="235" fixed="right" align="center">
            <template v-slot="scoped">
              <el-button v-if="scoped.row.type !== 2" type="primary" text size="small" :icon="Plus"
                @click="handleAddChildren(scoped.row.id)">新增</el-button>
              <el-button type="primary" text size="small" :icon="EditPen"
                @click="handleAddOrUpdate(scoped.row.id)">修改</el-button>
              <el-button type="primary" text size="small" :icon="Delete"
                @click="handleRemove(scoped.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>


  <el-dialog v-model="dialogVisible" :title="title" style="width: 35%;">
    <el-form style="width: 96%;" :model="menuForm" :rules="rules" status-icon label-width="100px">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="menuForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="menuForm.type">
          <el-radio label="M">目录</el-radio>
          <el-radio label="C">菜单</el-radio>
          <el-radio label="B">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="menuForm.type !== 'B'" label="展示在侧边栏" prop="visible">
        <el-switch v-model="menuForm.visible" class="ml-2" inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0" :inactive-value="1"
          active-text="展示" inactive-text="隐藏" />
      </el-form-item>
      <el-form-item v-if="menuForm.type !== 'B'" label="菜单图标" prop="icon">
        <el-select v-model="menuForm.icon" clearable placeholder="Select">
          <el-option v-for="item in iconList" :key="item" :label="item" :value="item">
            <el-icon>
              <component class="icon" :is="item"></component>
            </el-icon>
            {{ item }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单状态" prop="status">
        <el-switch v-model="menuForm.status" class="ml-2" inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0" :inactive-value="1"
          active-text="启用" inactive-text="禁用" />
      </el-form-item>
      <el-form-item v-if="menuForm.type === 'C'" label="组件路径" prop="component">
        <el-input v-model="menuForm.component" autocomplete="off" placeholder="例如:system/menu/index" />
      </el-form-item>
      <el-form-item v-if="menuForm.type !== 'B'" label="路由地址" prop="path">
        <el-input v-model="menuForm.path" autocomplete="off" placeholder="例如:system" />
      </el-form-item>
      <el-form-item label="排序字段" prop="sort">
        <el-input-number v-model="menuForm.sort" :min="0" autocomplete="off" style="width: 60%;" />
      </el-form-item>
      <el-form-item v-if="menuForm.type !== 'M'" label="权限字符" prop="permission">
        <el-input v-model="menuForm.permission" autocomplete="off" placeholder="例如:system:menu:add" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'></style>